<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>Hello React!</title>
    <!-- <script src="../../../react.js"></script>
    <script src="../../../JSXTransformer.js"></script> -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script>
</head>

<body>
    <div id="cc"></div>
    <script type="text/jsx">
        var TestClickComponents = React.createClass({ handleClick:function(event){ var tipE = React.findDOMNode(this.refs.tip); if(tipE.style.display == 'none'){ tipE.style.display = 'inline'; }else{ tipE.style.display ='none'; } event.stopPropagation(); event.preventDefault();
        }, render:function(){ return(
        <div>
            <button onClick={this.handleClick}>显示|隐藏</button>
            <span ref='tip'>   点击测试   </span>
        </div>
        ); } }); var TestInputComponents = React.createClass({ getInitialState:function(){ return { inputContent:'' }; }, changeHandler:function(event){ this.setState({inputContent:event.target.value}); event.stopPropagation(); event.preventDefault(); }, render:function(){
        return(
        <div>
            <input type="text" onChange={this.changeHandler} />
            <span>{this.state.inputContent}</span>
        </div>
        ); } }); React.render(
        <div>
            <TestClickComponents />
            <br/>
            <br/>
            <TestInputComponents />
        </div>, document.getElementById("cc"))
    </script>
</body>

</html>